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ABSTRACT 

Created to help educators incorporate World Wide Web 
pages into teaching and learning, this collection of Web pages 
presents resources, materials, and techniques for using the Web* The 
first page focuses on tools for teaching and learning via the Web, 
providing pointers to sites containing the following: (1) course 
materials for both distance and traditional education; (2) up-to-date, 
information resources, such as the Census Bureau Home Page; (3) 
innovative methods of expanding the classroom via online 
conferencing, listservs, and electronic mail; (4) hypermedia tools to 
support a variety of learning styles; (5) student-publ ished pro jects ; 
and (6) student home page projects. Next, resources for developing 
Web instructional pages are presented, , including sites related to 
teaching on the Web, hypertext markup language (HTML) resources, and 
potential sources of information and course content. Techniques for 
saving source code from home pages are then described for both 
Windows- and Macintosh-based Web browsers and basic instructions for 
coding in HTML are presented, including commonly used HTML tags and 
hints for applying hyper-link tags. The next page reviews strategies 
for creating and testing home page files, while the final two pages 
discuss creating and using bookmarks, or locally maintained lists of 
sites, for both Macintosh and Windows versions of Netscape 2.0. 
Contains 13 references to books on using HTML. (HAA) 
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World Wide Web Home Pages - Tools for Teaching and 

Learning 

http://www.sccd.ctc.edu/~library/league.html 

1. Delivering Course Materials 

The Web can be used as a means for distributing course materials for both distance and traditional 
courses. 

Astronomy 123 Spring 1996 
(http://zebu.uoregon.edu/! 996/astrl 23.html) 

This is an Astronomy course offered at the University of Oregon. The course lectures are 
delivered electronically even though the class meets on campus. 

TIM 184 Home Pag e 
(http://www2.hawaii.edu/lynn/tim 1 84.html) 

This is a course home page for a food preparation course at the University of Hawaii. In 
addition to an online text, it features online labs, electronic quizzes, and chemistry 
animations. 

CIS 111.05 Course Syllabus 

(http://nsccux.sccd.ctc.edu/~jkent/cisl 1 105syllabus.html) 

This is Jean's course syllabus complete with links to other course content resources. 

2. Providing Access to Resources 

The Internet can provide information resources that are very current and that might otherwise be 
difficult to find. 

U.S. Census Bureau Home Pag e 
(http://www.census.gov/) 

The US Census Bureau is online with up to the minute statistics. 

Eastern Pacific Marine Observations 
(http://www. ocean weather . com/data/uswest.html) 

NOAA provides much raw data for those studying oceanography. 

NASA - Recent Dust Storm on Mars 
(http://www.hq.nasa.gov/office/pao/NewsRoom/marspix.html) 

NASA is an essential resource for astronomy. Here are photos of recent dust storms on Mars 
taken by the Hubble Telescope. 

Researching American Literature on the Internet 
(http://www.sccd.ctc.edu/~sbeasley/mais/maishome.html) 

This is Sarah's collection of important sites on the Internet for those doing research in 
American Literature. 

3. Expanding the Classroom 

Through the Internet, we can provide opportunites for greater interaction among our students. 
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Online conferencing, listservs, email, and chat rooms are examples of Internet tools that can foster 
this type of interaction. 

English Course at Fayette Technical Community College 
(http://www.fajdech.cc.nc.us/infodesk/vcampus/desktop.html) 

Students in this class interact through online conferencing, electronic mail, and a chat room. 
HvnerNews used in a statistics course at the U of W 
(http://bayes.stat. washington.edu:80/HyperNews/get/s3 1 l/sp96/web5/a.html) 

HyperNews, the conferencing software used in this class, allows students to work in small 
groups even though the class itself has 300 members. The focus of this activity is critical 
thinl^g, anaylsis, and synthesis. 

Writing the Information Superhighway Evaluation 
(http://www.lsa.umich.edu:80/ecb/infohighway/jan96/jan96.html) 

Here is an email archive from a course at the University of Michigan. 

4. Supporting a Variety of Learning Styles 

The hypermedia capabilities of the World Wide Web allow us to provide materials in a variety of 
formats (text, images, soimd, animation, moving pictures, etc.). 

Shockwave Animation 
(http://www2.hawaii.edu/lynn/main.html) 

If you have Shockwave installed as a plug-in, you'll be able to watch these computer 
animations for Food Preparation - a course taught at the University of Hawaii. 

Risset's Endless Glissando 

(http://www.vanderbilt.edu/Blair/Courses/MUSC216/Risset.html) 

This is a page that combines text, soimd clips and movie clips for Music 216 - Computer 
Music at Vanderbuilt. 

Trench Safety fLesson II 

(http://www.bsc.aubum.edu/research/trench/lessonO 1/lessonO 1 .html) 

This is a tutorial on trench safety from the Building Science Department at Auburn 
University. There are short video clips available here. 

5. Creating Meaningful Work for a World Wide Audience 



Publishing on the Web gives students an opportunity to show their work to the world not just their 
professor or a few of their classmates. 

Love - Final Project 

(http://wvAv.cwrl.utexas.edu/~roberts/e316_fall95/student_projects/group2/index.html) 

This student project is very impressive. 

Homelessness 

(http://weber.u. washington.edu/~mbeth/homeless.htm) 

Here is another example of a home page project that was very well done. 

Chicana Desperadas 

(http://wvAy2.en.utexas.edu/sheila/3 1 4s96/projects/group4/index.htm) 

This is a group home page project done by students at the University of Texas. 

6. Preparing Students with Information Age Skills 
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Working on home page projects helps students feel comfortable with the tools of the information 
age which they are almost certain to use in their future. 



Critique of Sport Utility Vehicles 

(http://weber.u. washington.edu/d2 l/ecmiller/3 1 6proj .html) 

Here we find an example of a home page that a cyber journalist would be proud of 
Mark's Internet Guide to Business Information 
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Mark's Internet Guide to Business Information 
(http://nsccux.sccd.ctc.edu/~mmannhlt/) 

This is a home page from a business student who took Jean's Internet course. 

Keawe's International Home Pag e 
(http://nsccux.sccd.ctc.edu/~keawe/home.html) 

Another CIS 1 1 1 student's home page that shows his stong interest in international topics 
and his ability to design a good home page. 



Resources for Developing Web Instructional Pages 

Teaching on the Web Resources 

Teaching and Learning on the Web 
(http://www.mcli.dist.maricopa.edu/tl/index.html) 

An extensive collection of course pages and course development materials searchable by 
subject or discipline. 

The World Lecture Hall 
(http://www.utexas.edu/world/lecture/index.html) 

"The World Lecture Hall (WLH) contains links to pages created by faculty worldwide who 
are using the Web to deliver class materials. For example, you will find course syllabi, 
assignments, lecture notes, exams, class calendars, multimedia textbooks, etc." 

Academic Uses of the Wo rld Wide Web. Browsers, and HTML 
(http://weber.u. washington.edu/~rells/R550/academic_uses.html) 

Examples of course pages, online courses, online publications, etc. The aim of this page is 
to provide a sampling of uses made of the web by educators. 

IntcrOuest 

(http://www.sce.ojgse.edu/iq/) 

"InterQuest involves several coordinated projects dedicated to establishing effective models 
and methods for teaching by internet technology, especially the World Wide Web." There 
are links here to online introductory calculus and philosophy courses, as well as resources 
addressing online pedagogy issues. 

HTML Resources 




The Teachers.Net Homepage Maker. 

(http://www.teachers.net/sampler/) 

The Homepage Maker is a free service through which you can fill out an online form 
specifying the text and features you'd like on a home page, and the Homepage Maker 
generates a page and sends you the source code. For a monthly fee, you can maintain your, 
site on Teachers.Net; they provide support for online conferencing, multiple mail accounts, 
etc. 



Web Course in a Box 

(http://madduck.mmd.vcu.edu/wcb/wcb.html) 

Online Course Templates 

(http://www2.ncsu.edu/ncsu/cals/template/index.html) 

A series of HTML-coded template pages for online course material. The "top" page 
provides a table of contents for page which provide syllabi, schedules, grading information, 
online quizzes, links to newsgroups and listservs. 

Convert Bookmark Files Into Web Pages. 

A great technique for creating web pages for courses is to make use of all the important sites 
you've bookmarked while roaming around the net. Diversity Resources on the Internet is an 
example of a web page created with this technique. 

Adobe Acrobat files —PDF format 

Adobe Portable Document Format (PDF) files can be created from Adobe Acrobat 
Exchange. This program allows you to create home page documents which "reproduce the 
look and feel of the printed page, complete with fonts, graphics, and formatting" and 
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look and feel of the printed page, complete with fonts, graphics, and formatting" and 
distribute them over the Web. Acrobat Reader, the program that you need for reading pdf 
files, can be downloaded free from Adobe . Two handouts that explain how to turn Netscape 
Bookmarks (Windows Version) and Netscape Bookmarks rMacintosh Version^ into home 
pages are examples of pdf documents on a home page. 

Introduction to HTML 

(http://www.cwru.edu/help/introHTML/toc.html) 

A very nice tutorial for learning HTML. 

Yale C/AIM WWW Style Manual 
(http://info.med.yale.edu/caim/StyleManual Top.html) 

This is a great guide for writing and designing hypertext documents; it addresses style 
issues for individual pages as well as complex sets of inter-related pages. 

HTML editors 

Yahoo's directory of HTML editors grouped by platform. 

Information and Course Content Resources 

The following is a highly selective list of sites that might provide resources for primary sources 
for assigiunents, or supplementary reading, or entertaining browsing, or .... 

The Electronic Newsstand 
(http://www.enews.com/) 

Links to lOO's of online newspapers and magazines. The site can be searched either for 
individual publications or for articles on particular subjects. 

Ecola Newsstand 
(http://www.ecola.com/news/) 

Another online newsstand with extensive links to electronic periodicals. 

Louisiana State University Library Webliographies 
(http://www.lib.lsu.edu/weblio.html) 

A series of subject guides to online resources for study in various fields. 

The Argus Clearinghouse 
(http://www.clearinghouse.net/) 

A extensive list of guides to subject-related Internet resources. 

Assflgiation of Research Libraries Directory of Electronic Journals and Newsletters 
(http://arl.cni.org/scomm/edir/) 

Unlike the commercial newsstands, this directory focuses on academic publications. 
Pirectory of Scholarly and Professional E-Conferences 
(http://n2h2.eom/KOVACS/) 

This directory provides descriptive information (purpose, scope, address, subscription 
information) for academic listservs and discussion groups. 

LibWeb 

(http://sunsite.berkeley.edu/Libweb/) 

As well as publishing information about hours and services and providing links to their 
online catalogs, libraries often provide links to online periodical databases. Consider adding 
links to your local library. This site provides a directory of library web sites (academic, 
public, governmental, etc.). 

Teaching Students to Think Critically about Internet Resources 
(http://weber.u. washington.edu/~libr560/NETEVAL/index.html) 

Tlus is a page from a workshop devoted to evaluation of Internet resources. As well as 
criteria and checklists for evaluation, there are three group exercises which reveal some of 
the issues and considerations in evaluating web-based information. 

The U.S. Census Web Site 
(http ://www.census. gov) 

A great source for demographic statistical data. 

The Washington Post Homework Maniac 

(http://www.washingtonpost.com/wp-srv/interact/longterm/safari/tours/maniac.htm) 

This site brings together links to a number of oidine reference sources (dictionaries. 
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government documents, thesauri, news, etc.) as well as selected sites in broad subject areas. 



This page was prepared by Sarah Beaslev and Jean Kent of the Seattle Community College District. 
Last revised Nov/1 4/96 
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Saving Source Code for Home Pages (Windows Version) 



It is very easy to save the source code for a home page that you’d like to adapt. Follow 
the steps below for either Method 1 or Method 2. 



Method 1 File->Save As 



These instructions presume you are using Netscape to view home pages on the Web. If 
you find a page you’d like to adapt for your own, select File->Save As fi'om the top menu 
bar. A dialog box like the one in Figure 1 will open. 



Make sure that the file type selected 
is HTML Files. You might want to 
make a directory called homepage 
first and save all your home page files 
in this directory. 

Use the file name index.htm and 
click on Save. 



Now all you have to do is open the 
index.htm file in Notepad, delete the 
original information, and insert your 
information. The world’s quickest 

home page has just been made! 




Figure 1 Save Dialog Box 



Method 2 Select, Copy, and Paste 



A second method for capturing source code also presumes you are using Netscape on the 
World Wide Web. If you find a page you want to adapt, select View->Document Source 
fi'om the top menu bar. A new page will appear that lists all the source code for the page 
you were viewing and it looks like Figure 2. 




Figure 2 Netscape Source Code Page 
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Copy the source code to the “clipboard” by using the key combination Ctrl C. (Hold down 
on the Ctrl key and tap the letter C.) 

Open Notepad and use your mouse to select Edit->Paste. A copy of the source code 
should appear in the Notepad Untitled window just like the one in Figure 3. 



j|| Untitled - Notepad 






<htnl> 






<head> 






<tltle>Type in a descriptiue hone page title here</title> 






</head> 






<body> 






<h1>The Headline that introduces your page goes here</h1> 






<t Next cones the picture of the coUege> 






<ing src»”nscc.gif" alt*"This is a picture of the canpus."> 






<P> 






I teach (or aduise, counsel, etc.) at North Seattle Conmunity 


College in 




Seattle, Washington. Giue a brief introduction to youself and 


your hone page 


•>>> 


here. 






<t Next cones a horizontal rule to help separate the parts of 


your page> 




<hr> 




is? 


<t The H2 tag creates a snaller headline> 






<H2>Here are sone useful resources for (a subject or course, etc):</h2> 




<P> 






<ul> 






<liXa href »"http://«mtf.historyplace.con/ciuiluar/index .htnl">The dull 




Uar</a> 






<liXa href-”http ://u«nf. access .digex.net/^dboyle/cu.htnl">The 


Onerican 


w 


dull War World Wide Web Infornatlon nrchiue</a> 






</ul> 






<hr> 






<h2>Here are links to sone of ny fauorite places on the Web:</h2> 




<ol> 






<liXa href-"http://utMi.proxinus.coa/yahoo">Nap It</a> Type in 


an address 


M 


and see a nap. 






<liXa href*”http://woo.loc.gou'*>Library of Congress</a> One can spend hours 


§§ 


looking around this ueb site. 






</ol> 






<hr> 






Send your connents to <a href*"nailto:your enail address goes 


here">Vour 




Nane</a>. 













Figure 3 Source Code Pasted into Notepad 



Save this file with the name index.htm and make sure that the File Type is set to text. 
Now you can delete the old information and add your information. Another very quick 
way to create a home page! 
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Saving Source Code for Home Pages (Macintosh Version) 

It is very easy to save the source code for a home page that you’d like to adapt Follow the 
steps below for Method 1 or Method 2. 



Method 1 File->Save As 



These instructions presume you are using Netscape to view home pages on the Web. If you 
find a page you’d like to adapt for your own, select File->Save As from the top menu 
bar. A didog box like the one in Figure 1 will open. 

Make sure that the file type selected is Source. You might want to create a folder called 
homepage first and save all your home page files into tfiis folder. 



Q homepage ▼ 



Format: Source 



Jean's Mac 



.n.. 






[ Desktop ] 
[ Nem 



Saue as: 


Cancel 


indeK.html 




ILJ^J 





Figure 1 Save Dialog Box 
Use the file name index.html and click on Save. 

Now all you have to do is open the index.html file in SimpleText, delete the ori^nal 
information, and insert your information. The world’s quickest home page has just been 
made. 



Method 2 Select, Copy, and Paste 



A second method for saving source code also presumes you're using Netscape on the 
World Wide Web. If you find a page you want to adapt, select View->Document 
Source from the top menu bar. A new page will appear that lists all the source code for the 
page you were viewing and it looks like Figure 2. 
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Copy the source code to the “clipboard” by selecting Edit->SeIect All and then Edit- 
>Copy. Use your mouse to select FiIe->New from the top menu bar. A new SimpleText 
window will open. Now select Edit->Paste to copy your source code to the Untitled 
document on the screen. It should look like Figure 3 below. 



^ File Edit Font Size Style Sound — connwied Sun i 






<htm)> 




<h0ad> 




<title>Type In a descriptive home page title here</title> 




</head> 




<body> 




<hl>The Headline that introduces your page goes here</hl> 


1 


<! Next comes the picture of the college> 


% 


<1mg src=“nscc.gir alt=*This is a picture of the campus. '> 




<p> 




1 teach (or advise, counsel, etc.) at North Seattle Community College in 




Seattle, Washington. Give a brief Introduction to youself and your home page 


1 


here. 


M 


<! Next comes a horizontal rule to help separate the parts of your page> 


m 


<hr> 


ii 


<! The H2 tag creates a smaller headline> 


;|| 


<H2>Here are some useful resources for (a subject or course, etc):</h2> 


i 


<P> 


i 


<ul> 





Figure 3 Source Code Pasted into SimpleText 

Save this file with the name index.html and make sure the File Type is set to text. Now 
you can delete the old information and add your information. Another very quick way to 
create a home page! 
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HyperText Markup Language 

HTML Basics 



Hypertext Markup Language is the language of the World Wide Web. HTML consists of 
tags that create the formatting on a home page as well as the links and the placement of 
graphics. It is similar to old fashioned word processors that required special codes to 
create bold or underlined text when a file was printed. With a dozen or so tags, you can 
create very functional, attractive home pages! 

Before becoming acquainted with the tags themselves, here are some general background 
concepts you need to know; 

• Tags must be enclosed in angle brackets like this; o. 

• Tags aren’t case sensitive. <BODY> is identical to <bOdy> 

• Most tags have a beginning tag and an ending tag that includes a / (slash). 
<body> is the beginning tag and <^ody> is the ending tag. 

• All text you want to be affected must be enclosed by a beginning and ending 
tag. <b>Here is bolded text<^> will appear like this; Here is bolded text 

• A good way to learn how HTML tags work is to look at the source code used 
for home pages while you surf the Web. In Netscape you can see the source 
code by selecting View->Document Source. 



Commonly Used HTML Tags 



Here is a list of the most commonly used HTML tags for creating home pages 



Structural Tags 






Beginning Tag 


Ending Tag 


Tag Function 


<HTML> 


</HTML> 


Starts/ends a document 


<HEAD> 


</HEAD> 


Identifies the info that 
appears in Netscape title 
bar but not inside the 
Netscape window 


<TITLE> 


</TITLE> 


Starts/ends a title which 
appears in the Netscape 
title bar 


<BODY> 


</BODY> 


Starts/ends the body which 
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appears in the Netscape 
window 


Layout Tags 






<H1>, <H2>, <H3>, <H4>, <H5>, 
<H6> 


</Hl>, </H2> ,etc. 


Starts/ends headline text. 
HI is largest and H6 is 

smallest 


<P> 


no ending tag 


Starts new paragraph 


<BR> 


no ending tag 


Inserts line break 


<CENTER> 


</CENTER> 


Centers text on the screen 


<HR> 


no ending tag 


Inserts a horizontal line 


Formatting Tags 






<B> 


</B> 


Surrounds bold text 


<I> 


<fl> 


Surrounds italic text 


<U> 


</U> 


Surrounds underlined text 


List Tags 






<UL> 


</UL> 


Starts/ends unordered 
(bulleted) list 


<OL> 


</OL> 


Starts/ends ordered 
(numbered) list 


<Li> 


no ending tag 


Precedes entries in a list 
either unordered or 
ordered 


Table Tags 






<TABLE> 


</TABLE> 


Begins and ends a table 


<TH> 


</TH> 


Adds a heading to a 
column or a row 


<TR> 


</TR> 


Begins and ends a table 
row 


<TD> 


</TD> 


Begins and ends a table 
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cell 


Hvoer-Iink Taes 






<AHREF=”url”> 


</A> 


Creates a hot link to 
another Web page 


<A HREF=”file_name”> 


</A> 


Creates a hot link to 
another Web page in your 
Web site 


<A HREF=”#link_target”> 


</A> 


Creates a hot link to 
another part of your home 
page (quick scroll link) 


<A NAME- ’target_tag”> 


</A> 


Identifies the quick scroll 
location - always paired 
with the tag listed above 


Graphics Taes 






<IMG SRC=“url”> 


no ending tag 


Inserts inline graphic fi-om 
a remote Web server 


<IMG SRC=”file_name”> 


no ending tag 


Inserts inline graphic fi-om 
a local graphic file 


Miscellaneous Taes 






<!Comment> 


no ending tag 


Adds a comment or 
explanation that doesn’t 
appear when page is 
viewed with Netscape 


<body bgcolor=“#linn”> 


<^ody> 


Changes background color 
to white 


<font size=#n> 


</font> 


Changes the size of the 
font (default is 3, 1 is 

smallest and 7 is 
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Hints for applying the <A> Hyper-Link Tags 



• With the <A> tag, you’ll usually use BOREF followed by a URL with quotation marks 
around it. For example, the following would create a “hot link” to the Yahoo home 
page. 

< A HREF-’http ://www. yahoo . com”> Y ahoo</A> 

In this example, the I^ertext B£F erence is given inside the <A> tag and the 
word Yahoo becomes the underlined hot link on your home page. 

• The <A HREF- ’file_name”> tag is how you link another local home page to your 
main home page. For example, if you wanted to create a course home page with links 
to home work assignments, the tag might look like this: 

<A HREF=“assign.htm”>Course Assignments</A> - the file is called assign.htm and 
the hot link on your home page appears as Course Assi 2 nments . 

• The <A HREF=”#link_target”> is used to make links within your home page. This 
allows people to jump around in your page without having to scroll too much. I call it 
a “quick scroll” tag. It is always paired with a <a name=”target_tag”>. 



Hints for applying the <IMG SRC> Graphics Tag 



• Two graphic file formats are used on the WWW. One of them is gif (pronounced like 
the peanut butter Jif) and the other is jpg or jpeg. Jpg format is best for photographs 
and gif is best when you have large areas with the same color. 

• With the <IMG SRC> tag you’ll usually add the name of the image file (with 
quotation marks around it) after the tag. 

<IMG SRC=”logo.gif ’> 

• You can also link to a remote graphic. That is, you can use the URL for the location 
of the graphic file and it will still display on your home page. 

<IMG SRC=“http.7/www.fau.edu/student/chemclub/dave/images/cy_bar.gif’> 

This method insures that you don’t violate copyright, but if the original file is 
deleted or changed, your graphic will change as well. 

• You can use a graphic as a “hot link”, too. 

<AHREF=“http://nsccux.sccd.ctc.edu/”><IMG SRC=“logo.gif’></A> would 
make the graphic called “logo.gif’ a hot link and when selected it would take the 
viewer back to the North Seattle home page. 
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Creating and Testing your Home Page Files 



Creating your home page files 



You MUST do the following in order to insure your home page will work on the World 

Wide Web. 

1 . Use a text editor like Notepad (Windows) or SimpIeText (Mac) to create your home 
page files. (You can use a word processor, but if you save your file as a Word or 
Word Perfect file, it will be ruined for the Web.) 

2. You must save the files as text files with a “file extension” of .htm (Windows) or 
.html (Mac). 

3. Check with your Web administrator about special naming conventions for your home 
page files. Here at Seattle Community College, we must name our main home page file 
index.html when we copy it to our Web server. Other systems may require other file 
names, though. 

4. Graphics files should be in gif or jpg format in order to work with most of the Web 
browsers. 



Testing your home page 



1. Open Notepad (Windows) or SimpIeText (Mac) and type in the HTML tags and text 
you want on your home page. 

2. Save your home page file as a text file with the file extension .htm (Windows) or 
.html (Mac). I encourage you to use all lower case letters and you cannot leave spaces 
in your file names. 

3. Open Netscape as a second application. Don’t close the text editor (Notepad or 
SimpIeText, if you are using it). The idea is to switch back and forth between them. 

4. Go to File on the menu bar and click on Open File 
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Figure 1 Open File in Netscape 
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5. In the dialog box that appears, select your home page file. 

6. Your home page should appear just like magic. 




Figure 2 Home Page in Netscape 

7. If you are using a Windows computer, your can return to editing your home page file 
by pressing Alt + Tab keys together and releasing the Alt key when the icon for your 
text editor appears on the screen. 

8. Make sure you save any corrections you make to your home page file, then switch 
back to Netscape. Again, in Windows you can use the Alt + Tab key combination to 
toggle back and forth. 



9. Use your mouse to click on the Reload button to view the corrected version of your 
home page. 




Figure 3 Netscape Reload Button 



10. Repeat these steps until your home page is perfect! 
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Netscape 2.01 Bookmarks (Macintosh Version) 



Netscape bookmarks allow you to return to a site you’ve visited on the World Wide Web 
without retyping the URL. This handout will guide you through the process of creating and 
organizing Netscape 2.01 version bookmarks, as well as turning them into home pages. 



Creating and Using Bookmarks with Netscape 



To create a bookmark simply click on Bookmarks on the top menu bar and select Add 
Bookmark. If you prefer using a keyboard shortcut, you can use Command D to create 
your bookmark. Here’s what making a bookmark looks like: 



w 


File 


Edit Uieuj 


Go| 










Home 1 I 





Bookmarks 
Rdd Bookmark % 



Options Directory lUindoiu 



i 



ttle Coromonlty coUege m 





Figure 1 Creating a Netscape Bookmark 



To use a bookmark, simply click on Bookmarks on the top menu bar and select the 
bookmark for the site to which you’d like to return. It’s that easy. 



Organizing Netscape Bookmarks 




After you add several bookmarks, you may want to organize them to make them more 
efficient and useful. In order to do this, you must open the bookmark window by selecting 
Window from the menu bar and then Bookmarks. Below is a copy of the screen you 

receive when you follow these steps: 



There are several choices when you click 

on File in the menu bar. The most 

important are: 

• Open Bookmark File to open a 
bookmark file 

• Import Bookmarks - to add 
another bookmark file to your current 
bookmark list 

• Save As... - to copy these 
bookmarks to another disk or file 
name 

• What’s New - Netscape will check 
for sites on your bookmark list that 
have chang^ 

• Quit - to close this window and 
return to Netscape 



If you click on Edit in the menu bar you will receive the usual choices like Copy, Cut, 
and Paste. You can also Undo, Redo, and Delete Bookmark. 



File Edit Item lUindoui 



Conne< 



I® 



iiBbdklihairki;! 



J Resources for Diversify 

Diversity in Business at Fisher College 
^ Intercultural E-Mail Classroom Connections 
^ Hill's African American Site List 
H The UCLA Asian American Studies Center 
CLNET Home Page 

^ Humboldt State University : Tribal Links 
^ feminism 
^ Yahoo I 

^ AltaVista Search : Main Page 
^ Diversity Web 
^ MetaCrawler Searching 









Figure 2 Netscape Bookmark Window 
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The Item choice on the menu bar is where you will find the tools to customize your 
bookmarks. Below in Figure 3, you will see the screen that appears after clicking on Edit 
Bookmark. 






File Edit 



Jean Kent's Boo 
Resources for 
^ Diversity in E 
§ Intercultural i 
^ Hill’s African 
^ feminism 
^ AltaVista Sea 
^ Humboldt Stai 
I CLNET Home f 
1 Yahoo! 



lUindoLii 



item 
Edit Bookmark... 



Go to Bookmark 

Sort Bookmark?^ 



Connected 



insert Bookmark... 
insert Foider... 
insert Separator 



Make fliias 



Set to Neu.? Folder 

Set to Bookmsrk Msnu Folder 

p The UCLA Asian American studies center 
MetaCrawler Searching 



Figure 3 Item Menu Selections 



The Edit Bookmark screen 
shows you some important 
information about each 
bookmark you’ve made. It 
shows the URL of the site, 
the last time you visited it, 
and it gives you a space in 
which to enter a description of 
the site. 

Go to Bookmark is 

obviously a way to select a 
bookmarked site to return to 
it. 

Sort Bookmarks is where 
you can re-organize your 
bookmark folders. This 
choice is not available until 
you create folders. 



* Insert Bookmark, when 

selected, brings up the dialog box that looks like the one in Figure 4 below: 



Y ou can add a bookmark if you 
have the URL. Type in the name of 
your bookmark in the Name box. 
Enter the URL in the Location 
(URL) box. Notice you can include 
a description for the bookmark, 
too. If you use this screen for 
creating a bookmark, you will need 
to click on OK to complete the 
process. 



The next selection available from 
the Item menu bar choice is Insert 
Folder. This is a way to group 
together similar sites and give them a category label or name. 

If you select this choice, you will get a screen that looks like the one in Figure 5 below: 






Loutioa (URL) : 
DKorlptloa: 



Last Visited ; 

Added on: Sun Oot 27 08 29 :02 1996 




Figure 4 New Bookmark Window 
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Since several of my bookmarks are for general diversity sites. I’ve entered the label 
General Diversity Sites. I’ve used die Description box to include a comment about the 
folder, and I’ll put all the bookmarks for this category into this folder. When I find other 
general diversity sites. I’ll just add it to this folder. 




Figure 5 Creating a Folder 



After I create my folder for general diversity sites, I simply drag and drop all the related 
bookmarks into the folder. I’ve also includ^ several subfolders to further organize my 
diversity sites, and I’ve added a “WWW Search Engines” folder as well. 



File Edit Item lllindoui 



Conn&ct&d 



{ Je^n Kent’s Bookmarks 
R?! General Diversity Sites 
H Diversity Veb 

Resources for Diversity 
§ Intercultural E-Mail Classroom Connections 
Diversity in Business at Fisher College 
African American Resources 
{ HilVs African American Site List 
Asian American Resources 
^ The UCLA Asian American Studies Center 
Latino / Hispanic Resources 
^ CLNET Home Page 
Native American Resources 
]| Humboldt State University : Tribal Links 
Womens* Studies Resources 
g feminism 

Search Engines 

^ AltaVista Search : Main Page 
MetaCrawler Searching 

Figure 6 Bookmark Folders and Subfolders 



Figure 6 shows how these 
bookmarks appear when they have 
been put into folders: 
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Figure 7 shows what my bookmarks look like now when I select Bookmarks from the 
main Netscape screen: 




Figure 7 Organized View of Bookmarks 



Turning Bookmarks into Home Pages 



After you have organized your bookmarks by putting them into labeled folders, you can 
add a brief description for each bookmark. To do this, open the bookmark window (click 
on Window then select Bookmarks) and then single click on the bookmark you want to 
describe. Select Item->Edit from the menu bar. The dialog box you receive looks like the 
one pictured in Figure 8 below: 



.piuersittf tUeb 



Name : 
Location CURL): 
Description : 



http : / .inform .umd .edu :8Q8Q /di versity \/eb 

Diversity Web is the main site for the Ford Foundation Conference called 
'Diversity Education and the Public Good" 



Last Visited : 1 0 hours ago 

Added on: Sat Oct 26 21 ;32:24 1996 

There are no aliases to this bookmark 



Cancel ] | OK ^ 



Figure 8 Adding a Description to a Bookmark 



I chose the Diversity Web bookmark to describe. All you have to do is click your mouse in 
the Description box and t)^e it in. When you are done, click on OK. 

This description will appear beneath the link for Diversity Web if you use your bookmark 
file as your Netscape home page. It will also appear if you include it as part of an Internet 
home page. 

To open your bookmark file in Netscape, select File->Open File from the menu bar. 
Your bookmark file is in the Netscape Preferences Folder in your System Folder and it is 
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called Bookmarks.htmi. Use the dialog box that opens to select it from the preferences 
folder. Figure 9 shows how to select your bookmark file from the Open File dialog box. 



Q Netscape f ▼ ) 



^ Bookmarks.html 



(§1 Cache f 
iHJaua 
i (23Mail 
03 Nems 

Q orig.bookmarks.html 
^Security 

Figure 9 Open File Dialog Box 

In the screen below, you will see what my bookmark file looks like as a Netscape home 
page. 




Figure 10 Bookmarks Used as a Home Page 






=]Jean's Mac 

[ J 

[ Desktop ] 



[ Cancel ) 

li . Ji 



To turn your bookmark file into your Netscape home page, follow these steps: 
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1. First, use your mouse to select then copy to the Clipboard (Command C) the 
information that appears in the Netscape Go To: box. 

2. Next, select Options->General Preferences from the menu bar. 

3. Single click on the Appearance tab. 

4. Single click in the box beside Home Page Location. 

5. Paste (Command. V) the contents of the Clipboard into this box. A long, rather 
intimidating string of letters and % signs should appear in this box. This tells Netscape 
where to find your bookmark file. 

In the figure below, you will see how I indicated my bookinark file: ; , . 




Figure 1 1 Selecting Bookmark File as your Home Page 



After I have finished describing each of the bookmarks in my file, I can actually copy this 
file to my Internet account and use it as a home page. In fact, several of the home pages we 
will use in the training today were made just like this. 

Figure 12 shows you what one looks like: 
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^ File Edit Uieui Go Bookmarks Options Directory lOIndoui 0' conneotcd — 7:28 HM 


M' ~'™"' — ^ '' Netscape: muersilg Resources on tfte latemet ^ — - 




P Em • • 




/wv .seed .etc .«du/'|cmI/d1v«rsTtg btml 


■ : ; ■■"i 




>1^ It 1 





Diversity Resources on the Internet 

TWs page ves developed for use the S rixmjrj ; Our tte V/eb held at Hoidi Seattle Community College August 

15, 1998. 

General Diversity Resources 

These sites cover the broad topic of diversity. Each is a good starting place for exploration. 

all types of diversity topics on this page. Age , class, national origin, gender, 
disability, race and ethnicity, religion, and sexual orientation are covered. The URL is 
http Vhrvv.mforiiLumd .ediLaDSO/EdResOtopic/Diversity 

tvx Pivexsit v 

These diversity hnks are provided by Nova Soudieastein University in Florida. The URL is 
http'ihvw. nova. edu/Inter-LinhsUiversity. htmL 

CoYinections ^ 

F rom this page yon ^ fiM Ihths to cnnicntum ideas as 'veU as a mailing list that vould help you find partners in other 
countries end cnltmes for penpals for 3 rour students. The URL is http://vvv.stDlaf.edu/netvDik/iecc/ 

Cvtlu^e DjL\^vsi;yMs ;? g;ntKe 

Many online publications on topics of diversity are linked from this page developed by the University of Ohio School of . 
Business. The URL is ht^'.//vvv.cob.ohio-5iate.edu/*diveisitv/#mag 

African American Resources 

There are Jaige numbers of links to Afiiceor American Studies on the Internet. The pages listed belov viH lead you to many, many 
other sites. 

K22;s^A^?yQ A^ 

This page is m^aEed by Scott HiH from Hovard University and has over 100 links to other resources. They are 
divided into topics like ^rican Studies, demographics, and affinnative action. The URL is 
httpV/ezcahbur.accss. hovaid.edu/vebinaster/afiica.htinl 



p 
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Figure 1 2 Bookmark File on the Internet 



This is a very quick way to generate subject specific home pages for your students of 
yourself for that matter. 



Turning Bookmarks into a Home Page (Low Tech Method) 



Remember that you can save a bookmark file to a disk and make copies of it for your 
students. They can open the file in Netscape and use it as if it were a home page on the 
Web. Tell your students to open Netscape, select FiIe->Open File, and in the dialog box 
choose the folder and name of the bookmark file. The boolmark file should open and the 
links will work if the student is online. 



25 

BEST COPY AVAILABLE 

o 

ERIC 



7 



League for Innovation 

World Wide Web Home Pages - Tools for Teaching & Learning 

Netscape 2.0 Bookmarks (Windows Version) 

Netscape bookmarks allow you to return to a site you ve visited on the World Wide Web 
without retyping the URL. This handout v^nll guide you through the process of creating 
and organizing Netscape 2.0 version bookmarks, as well as turning them into home pages. 



Creating and Using Bookmarks with Netscape 

To create a bookmark in Netscape, simply click on Bookmarks on the top menu bar and 
then select Add Bookmark. If you prefer using a keyboard shortcut to create your 
bookmark, you can use Ctrl D as well. Here’s what making a bookmark looks like: 




Figure 1 Creating a Netscape Bookmark 



To use a bookmark, simply click on Bookmarks on the top menu bar and click on the 
bookmark for the site to which you’d like to return. It’s that easy. 



Organizing Netscape Bookmarks 



After you add several bookmarks you may want to organize them to make them more 
efficient and useful. In order to do this, you must open the bookmark window by selecting 
Window from the top menu bar and then Bookmarks. Below is a copy of the screen you 
receive if you follow these steps: 




'Ite'-. 


Edit Item 


Jean Kent's Bookmarks 


hi 


University of Maryland Diversity Database 


hi 


Resources for Diversity 


\1 


Human Development. Multiculturalism. and Diversity 


hi 


Human Development, Multiculturalism, and Diversity 


hi 


Diversity in Business at Fisher College 


i-i 


African American Webliography 


hi 


The UCLA Asian American Studies Center 


hi 


CLNET Home Page 


hi 


Humboldt State University: T ribal Links 


hi 


feminism 


hi 


Yahoo! 


hi 


AltaVista Search: Main Page 


^ 



Figure 2 Netscape Bookmark Window 



If you click on File on the top 

menu bar in this window you will 

have the following choices: 

• Open - to use another 
bookmark file 

• Import - to add another 
bookmark file to the one you 
are currently using 

• Save As - to make a copy of 
your bookmark file 

• What’s New? - Netscape will 
check for sites on your 
bookmark list which have 
changed 

a Close - to exit from your 
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bookmark file 



If you click on Edit on the top menu bar you will receive the usual choices like copy, cut, 
and paste. You can also Undo, Redo, and Delete. 

The Item choice on the menu bar is where you will find the tools to customize your 
bookmarks. Below in Figure 3, you’ll see the screen that appears after clicking on Item. 



• Properties shows you some 
important information about each 
bookmark you’ve made. It shows the 
URL of the site, the last time you 
visited it, and it gives you a space in 
which to enter a description of the 
site. 

• Go to Bookmark is a way to select 
a bookmarked site to return to it. 

• Sort Bookmarks is where you can 
re-organize your bookmark folders. 
This choice is not available until you 
create folders. 

• Insert Bookmark, when selected, 
brings up a dialog box that looks like 

the one in Figure 4 below; 
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Figure 3 Item Menu Selections 



You can add a bookmark if you 
have the URL. Type in the name of 
your bookmark in the Name box. 
Enter the URL in the Location 
(URL) box. Notice you can include 
a description for the bookmark, too. 
If you use this screen for creating a 
bookmark, you will need to click on 
OK to complete the process. 




Figure 4 New Bookmark Window 



The next selection available from the Item menu bar choice is Insert Folder. This is a way 
to group together similar sites and give them a category label or name. If you select this 
choice, here is the screen that will appear: 
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Since several of my bookmarks 
are for general diversity sites, 
I’ve entered the label General 
Diversity Sites. I used the 
Description box to include a 
comment about the folder, and 
I’ll put all the bookmarks for 
this category into this folder. 
When I find other general 
diversity sites to bookmark. I’ll 
just add them to this folder. 

After I create my folder for 
general diversity sites, I simply 
drag and drop all the related 
bookmarks into the folder. 



Figure 5 Creating a Folder 

Below you’ll see how my bookmarks have been organized. I also added several subfolders 
to further organize my diversity sites, and I added a “WWW Search Engines” folder, as 
well. 




B-iM 

B-ii 






General Diversity Sites 

Diversity in Business at Fisher College 
Human Development, Multiculturalism, and Diversity 
Resources for Diversity 
University of Maryland Diversity Database 
African American Resources 
I African American Webliography 
Asian American Resources 
\ The UCLA Asian American Studies Center 

Latino / Hispanic Resources 
Native American Resources 
g Womens' S tudies R esources 
WWW Search Engines 
\ AltaVista Search: Main Page 
\ M etaCrawler S earching 

Yahoo! 



Figure 6 Bookmark Folders and Subfolders 

Figure 7 shows what my bookmarks look like now when I select Bookmarks from the 
main Netscape screen; 
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Figure 7 Organized View of Bookmarks 



Turning Bookmarks into a Home Page 

After you have organized your bookmarks by putting them into labeled folders, you can 
add a brief description for each bookmark. To do this, open the bookmark window (chck 
on Window then select Bookmarks) and then single chck on the bookmark you want to 
describe. Next, select Item->Properties from the menu bar. 

I chose the University of Maryland 
bookmark to describe. All you have 
to do is chck your mouse in the 
Description box and type it in. 

When you are done, chck on OK. 



This description will appear beneath 
the link for University of Maryland 
Diversity Database if you use your 
bookmark file as your Netscape 
home page. It will also appear if you 
include it as part of an Internet 
home page. 




hUp://www.infoiin.unid.edu: 8080 /EdRet/ 

p: ' 



Th» site is rich in links. A great place to 
begin researching diversity topics on the 
WWW.I 



* Z houss 99 a 



a ^ 
















I Cdneei ^ 

















Figure 8 Adding a Description to a Bookmark 

In the screen below you’ll see what my bookmark file looks like as a Netscape home page. 
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Jean Kent's Bookmarks 

General Diversity Sites 

These bookmarks were collected Oct 26. 

Diversity in Business at Fisher CoUeae 

■ iJirm an D evdo pment. .MvJtinirvgalism. and Diversity 

Resoiirces tor- Diversity 

ITmversii>; of Maiwlaitd Diversity Database 

This site is rich in links. A great place to begin researching diversity topics on the 
WWW. 

African American Resources 



Figure 9 Bookmarks Used as a Home Page 



To turn your bookmark file into your Netscape home page, select Options->General 
Preferences from the menu bar. Single click on the Appearance tab and in the box below 
the Start With choices, type the path and name of your bookmark file. In the figure below 
you will see how I indicated my bookmark file. 




Figure 10 Making a Bookmark File Your Home Page 
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After I have finished describing each of the bookmarks in my file, I can actually copy this 
file to my Internet account and use it as a home page. 



Here’s what one looks like: 



jFifc JErill 
























Fihft vli 






hUp7/www. seed. etc. eduy^jkent/'dvefsity.hlml 



Diversity Resources on the Internet 

This page was developed for use with the Spinning Our Stories On the Web Workshop held at 
North Seattle Community College August 15, 1996. 

General Diversity Resources 

These sites cover the broad topic of diversity. Each is a good starting place for exploratioa 
University of Maryland Diversity Database 

You'll find several excellent links to ail types of diversity topics on this page. Age, class, 
national origin, gender, disability, race and ethnicity, religion, and sexual orientation are 
covered. Tne URL is http://www.inform.umd. edu:8080/EdRes/Topic/Diversity 
Resources for Diversity 

These diversity links are provided by Nova Southeastern University in Florida. The 









Figure 11 Bookmark File as a Home Page 



This is a very quick way to generate subject specific home pages for your students or 
yourself for that matter. 



Turning Bookmarks into a Home Page (Low Tech Method) 

Remember that you can save a bookmark file to a disk and make copies of it for your 
students. They can open the file in Netscape and use it as if it were a home page on the 
Web. Tell your students to open Netscape, select FiIe->Open File, and in the dialog box 
choose the drive and name of the bookmark file. The bookmark file should open and the 
links will work if the student is online. 
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Bibliography of HTML Books 

There are almost 50 books on creating home pages for the World Wide Web. A few of the 
ones that I use or like are listed below. 



Arpajian, Scott. How to use HTML 3. Emeryville, Calif. : Ziff-Davis Press, 1996. 

A step-by-step guide with excellent graphics. 

Fljmn, Peter. The World Wide Web handbook : a guide for users, authors, and publishers. 
London ; Boston : International Thomson Computer Press, 1995. 

Fox, David. HTML Web publisher's construction kit. Corte Madera, CA ; Waite Giroup 
Press, 1995. 

Grraham, Ian S. The HTML sourcebook : a complete guide to HTML 3.0. 2nd ed. New 
York : John Wiley & Sons, 1996. 

LeJeune, Urban A. Netscape & HTML explorer. Scottsdale, Ariz. : Coriolis Giroup Books, 
1995. 

This is my “bible” for home pages. 

Lemay, Laura. Teach yourself Web publishing with HTML 3. 0 in a week. 2nd ed. 
Indianapolis, Ind. : Sams.net Pub., 1996. 

McCanna, Laurie. Creating great web graphics. MIS Press, 1996. 

Learn how to make your ovm graphics with this book. 

McFedries, Paul. The complete idiot's guide to creating an HTML Web page. 

Indianapolis, Ind. : Que, 1996. 

Niederst, Jennifer. Designing for the web : getting started in a new medium. Sebastopol, 
CA ; O'Reilly & Associates, 1996. 

An excellent book for learning more about graphics on the Web. 

Taylor, Dave. Creating cool web pages with HTML. Foster City, CA : IDG Books 
Worldwide, 1995. 

Tittel, Ed. HTML for dummies. Foster City, CA ; IDG Books, 1995. 

The Web page design cookbook : all the ingredients you need to create 5-star Web pages. 
William Horton ... [et al.]. New York : Wiley, 1996. 

Wilson, Stephen. World Wide Web design guide. Edmonds, WA : Hayden Books, 1995. 
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